<template>
    <div>
        <Title :icon="'file-list-2-fill'" :title="'营销报表'"></Title>
        <div class="relative items-center ml-16px mr-16px h-630px">
            <Tabs v-model="activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
                <template v-for="(item,index) in state.tabData" :key="index">
                    <TabItem :icon="item.icon" :label="item.Name" path="" :quantity="item.Value" :index="index">
                        <div class="h-570px" v-loading="state.isLoading">
                        <MarReportItem :ID="item.ID" :type="state.type" :tabData="state.tabData" :tableData="state.tableData" :page="state.page" @update:data="handleUpdateList" />
                        </div>
                    </TabItem>
                </template>
            </Tabs>
            <div class="flex items-center absolute top-0px right-0px">
                <div class="w-150px mr-12px"><el-input v-model="state.keyword" placeholder="请输入关键词"></el-input></div>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Tabs from '@/components/Tab/First.vue'
import TabItem from '@/components/Tab/Item.vue'
import MarReportItem from './MarReportItem.vue'
import { getKeywordReportApi,getSimilarKeywordApi } from '@/api/geo/index'
import { ITab } from '@/api/geo/types'

const route = useRoute()

const activeIndex = ref(0)

const state = reactive({
    tableData: [],
    page: {
        total: 0,
        curPage: 1,
        limit: 10,
        pageSizes: 10,
    },
    isLoading:true,
    all:0,
    type:0,
    stype:0,
    tabData:<ITab[]>[],
    skip:'',
    keyword:''
})

function handleTabClick(val: any) {
    //每次切换的时候重置分页，重新获取数据
    const { index } = val
    state.type = index
    state.stype = 0
    activeIndex.value = index
    state.page.curPage = 1
    state.page.pageSizes = 10
    getRoutePath()
}

async function getSimilarKeyword(url:string){
    const res = await getSimilarKeywordApi(url,{
        keyword:state.keyword,
        skip:state.skip || ''
    })
    if(res.code === 200){
        
        nextTick(() => {
            state.tabData = res.data
        })
    }
}

async function getKeywordReport(url:string){
    state.isLoading = true
    const res:ResType = await getKeywordReportApi(url,{
        pn: state.page.curPage,
        pagesize: state.page.pageSizes,
        aitype:state.type,
        stype:state.stype,
        skip:state.skip,
        keyword:state.keyword
    })
    if(res.code === 200){
        state.isLoading = false
        state.tableData = res.data
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count
    }
}

function handleUpdateList(value: any) {
    state.page.curPage = value.curPage
    state.page.pageSizes = value.pageSizes
    state.page.limit = value.limit
    state.stype = value.stype
    getRoutePath()
}

function getRoutePath() {
    const pathSegment = route.path.split('/').pop()
    if(pathSegment === 'geo-customer'){
        getSimilarKeyword("/GEOCustomerApi/PlatformData")
        getKeywordReport("/GEOCustomerApi/KeywordRankList")
    }else{
        getSimilarKeyword("/GEOApi/PlatformData")   //切换数据
        getKeywordReport("/GEOApi/KeywordRankList") //列表数据
    }
}

function handleSearch(){
    state.page.curPage = 1
    state.type = 0
    state.stype = 0
    activeIndex.value = 0
    getRoutePath()
}

onMounted(() => {
    const { skip } = route.query
    state.skip = skip as string
    getRoutePath()
})
</script>

<style scoped>

</style>